واجهة برمجة تطبيقات قفل تنبيه الشاشة: منع وضع إسبات الشاشة في تطبيقات الويب

واجهة برمجة تطبيقات قفل تنبيه الشاشة هي واجهة برمجة تطبيقات ويب تتيح لتطبيقات الويب منع الأجهزة من تعتيم أو قفل الشاشة. وهذا مفيد بشكل خاص للتطبيقات التي تتطلب رؤية مستمرة للشاشة، مثل مشغلات الوسائط وتطبيقات التنقل والتطبيقات التي تتطلب تفاعل المستخدم لفترات طويلة.

لماذا يعتبر قفل تنبيه الشاشة مهمًا؟

في عالم اليوم، يتوقع المستخدمون تجارب سلسة. يمكن للجهاز الذي يقوم تلقائيًا بتعتيم أو قفل الشاشة أن يعطل هذه التجارب، خاصة عندما يكون المستخدمون منخرطين بنشاط في تطبيق ويب. ضع في اعتبارك هذه السيناريوهات:

• تشغيل الفيديو: تخيل أنك تشاهد فيلمًا أو تتبع برنامجًا تعليميًا للطبخ، والشاشة تخفت باستمرار، مما يجبرك على النقر على الشاشة لإبقائها قيد التشغيل. هذه تجربة محبطة.
• تطبيقات التنقل: أثناء القيادة واستخدام تطبيق تنقل، يجب أن تظل الشاشة قيد التشغيل لتوفير توجيهات مستمرة. قد يؤدي تعتيم الشاشة أو قفلها إلى تفويت المنعطفات ومخاطر محتملة على السلامة.
• تطبيقات العروض التقديمية: يتطلب تقديم الشرائح أو عرض المعلومات المهمة أن تظل الشاشة نشطة طوال العرض التقديمي.
• تطبيقات الألعاب: تحتاج العديد من الألعاب إلى رؤية شاشة دون انقطاع للعب. يمكن أن يعطل إسبات الشاشة تجربة الألعاب.
• السبورات البيضاء عبر الإنترنت: يتطلب العمل بشكل تعاوني على سبورة بيضاء عبر الإنترنت أن تظل الشاشة قيد التشغيل حتى لا يضطر المستخدمون إلى النقر بشكل متكرر لإعادة التفاعل.

توفر واجهة برمجة تطبيقات قفل تنبيه الشاشة حلاً لهذه المشكلات، مما يسمح لتطبيقات الويب بالتحكم في حالة تشغيل/إيقاف تشغيل الشاشة وتوفير تجربة أكثر سلاسة وسهولة في الاستخدام.

دعم المتصفح

اعتبارًا من أواخر عام 2024، تتمتع واجهة برمجة تطبيقات قفل تنبيه الشاشة بدعم قوي عبر المتصفحات الرئيسية. ومع ذلك، من الضروري دائمًا التحقق من أحدث معلومات توافق المتصفح على موارد مثل شبكة مطوري موزيلا (MDN) و Can I use لضمان التوافق الأمثل عبر المتصفحات. يمكن أن يختلف دعم المتصفح بناءً على إصدار المتصفح ونظام التشغيل.

استخدام واجهة برمجة تطبيقات قفل تنبيه الشاشة

واجهة برمجة تطبيقات قفل تنبيه الشاشة سهلة الاستخدام نسبيًا. فيما يلي تفصيل للخطوات الرئيسية المتضمنة:

1. التحقق من دعم واجهة برمجة التطبيقات

قبل محاولة استخدام واجهة برمجة التطبيقات، من الضروري التحقق مما إذا كان متصفح المستخدم يدعمها. يمنع هذا الأخطاء في المتصفحات التي لا تنفذ واجهة برمجة التطبيقات.

            if ('wakeLock' in navigator) {
  // Screen Wake Lock API supported
} else {
  // Screen Wake Lock API not supported
  console.log('Screen Wake Lock API is not supported by this browser.');
}

            

              
                Copy
              
            
          

2. طلب قفل تنبيه

لطلب قفل تنبيه، استخدم طريقة navigator.wakeLock.request(). تُرجع هذه الطريقة وعدًا يتم حله باستخدام كائن WakeLockSentinel إذا كان الطلب ناجحًا. يمثل كائن WakeLockSentinel قفل التنبيه النشط.

            let wakeLock = null;

const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Screen wake lock active!');

    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock was released');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Call this function to activate the wake lock
requestWakeLock();

            

              
                Copy
              
            
          

في هذا المثال، تحاول الدالة requestWakeLock() الحصول على قفل تنبيه الشاشة. تحدد الوسيطة 'screen' أننا نريد منع الشاشة من التعتيم أو القفل. إذا كان الطلب ناجحًا، فسيتم تسجيل رسالة في وحدة التحكم. يتضمن الكود أيضًا معالج أخطاء لالتقاط أي استثناءات قد تحدث أثناء طلب قفل التنبيه. والأهم من ذلك، يضيف الكود مستمع حدث للاستماع إلى حدث "release" الذي يشير إلى متى لم يعد قفل التنبيه نشطًا. قد يحدث هذا إذا قام المستخدم بإصدار القفل بشكل صريح أو إذا استعاده النظام بسبب تدابير توفير الطاقة.

3. تحرير قفل التنبيه

من الضروري تحرير قفل التنبيه عندما لم تعد هناك حاجة إليه. قد يؤدي عدم القيام بذلك إلى استنزاف بطارية الجهاز والتأثير سلبًا على تجربة المستخدم. لتحرير قفل التنبيه، استدع طريقة release() على كائن WakeLockSentinel.

            const releaseWakeLock = async () => {
  if (wakeLock) {
    await wakeLock.release();
    wakeLock = null;
    console.log('Screen wake lock released!');
  }
};

// Call this function to release the wake lock
releaseWakeLock();

            

              
                Copy
              
            
          

تقوم هذه الدالة بتحرير قفل التنبيه بأمان وتعيين متغير wakeLock إلى null. من الضروري التأكد من إدارة متغير wakeLock بشكل صحيح لتجنب الأخطاء عند تحرير القفل.

4. معالجة أحداث تحرير قفل التنبيه

قد يقوم النظام بتحرير قفل التنبيه لأسباب مختلفة، مثل عدم نشاط المستخدم أو انخفاض البطارية. من المهم الاستماع إلى حدث release على كائن WakeLockSentinel للتعامل مع هذه المواقف بأمان. يتيح لك ذلك إعادة طلب قفل التنبيه أو اتخاذ إجراءات مناسبة أخرى.

            wakeLock.addEventListener('release', () => {
  console.log('Screen Wake Lock was released');
  // Attempt to re-request the wake lock
  // or take other appropriate actions
  requestWakeLock(); // For example re-requesting the wakelock
});

            

              
                Copy
              
            
          

يوضح هذا المثال كيفية الاستماع إلى حدث release وربما إعادة طلب قفل التنبيه. سيعتمد التنفيذ الفعلي على المتطلبات المحددة لتطبيقك.

أفضل الممارسات والاعتبارات

في حين أن واجهة برمجة تطبيقات قفل تنبيه الشاشة هي أداة قوية، فمن الضروري استخدامها بمسؤولية والنظر في أفضل الممارسات التالية:

• اطلب أقفال التنبيه عند الضرورة فقط: تجنب الحصول على أقفال التنبيه دون داعٍ، لأنها يمكن أن تستنزف بطارية الجهاز. اطلب قفل التنبيه فقط عندما تكون رؤية الشاشة المستمرة ضرورية حقًا لتجربة المستخدم.
• حرر أقفال التنبيه على الفور: حرر قفل التنبيه بمجرد عدم الحاجة إليه. يساعد ذلك في الحفاظ على طاقة البطارية ومنع الاستنزاف غير الضروري.
• تعامل مع أحداث التحرير بأمان: كن مستعدًا للنظام لتحرير قفل التنبيه بشكل غير متوقع. استمع إلى حدث release واتخذ الإجراءات المناسبة، مثل إعادة طلب قفل التنبيه أو إعلام المستخدم.
• توفير عناصر تحكم للمستخدم: فكر في تزويد المستخدمين بعناصر تحكم لتمكين أو تعطيل ميزة قفل التنبيه. يمنح هذا المستخدمين مزيدًا من التحكم في استهلاك الطاقة في أجهزتهم ويسمح لهم بتخصيص سلوك التطبيق. على سبيل المثال، يمكن أن يحتوي مشغل الوسائط على مفتاح تبديل "إبقاء الشاشة قيد التشغيل".
• ضع في اعتبارك عمر البطارية: كن على دراية بالتأثير على عمر البطارية. يمكن أن يؤدي إبقاء الشاشة قيد التشغيل باستمرار إلى تقليل عمر البطارية بشكل كبير، خاصة على الأجهزة المحمولة. قم بإبلاغ المستخدمين بالتأثير المحتمل وقدم خيارات للتخفيف منه.
• إذن المستخدم: على الرغم من أن واجهة برمجة التطبيقات نفسها لا تطلب إذن المستخدم بشكل مباشر، فمن الممارسات الجيدة إعلام المستخدم بأن التطبيق يمنع الشاشة من النوم، والسماح لهم بتعطيل هذا السلوك.
• آلية احتياطية: بالنسبة للمتصفحات التي لا تدعم واجهة برمجة التطبيقات، فكر في تنفيذ آلية احتياطية. يمكن أن يتضمن ذلك استخدام JavaScript لإرسال أحداث وهمية بشكل دوري إلى الشاشة لمنعها من التعتيم أو القفل. ومع ذلك، كن على دراية بأن هذا النهج يمكن أن يكون أقل موثوقية وأكثر استهلاكًا للموارد من استخدام واجهة برمجة تطبيقات قفل تنبيه الشاشة.
• الاختبار: اختبر تطبيقك بدقة على أجهزة ومتصفحات مختلفة للتأكد من أن واجهة برمجة تطبيقات قفل تنبيه الشاشة تعمل كما هو متوقع. انتبه إلى استهلاك البطارية وتجربة المستخدم.
• إمكانية الوصول: كن على دراية بأن إبقاء الشاشة قيد التشغيل دائمًا قد يكون مشكلة بالنسبة لبعض المستخدمين. توفير طرق لتعطيل قفل تنبيه الشاشة يجعل تطبيقك أكثر سهولة في الوصول إليه.

أمثلة من العالم الحقيقي

فيما يلي بعض الأمثلة الواقعية لكيفية استخدام واجهة برمجة تطبيقات قفل تنبيه الشاشة في تطبيقات مختلفة:

• مشغلات الوسائط: يمكن لتطبيق بث الفيديو استخدام واجهة برمجة تطبيقات قفل تنبيه الشاشة لمنع الشاشة من التعتيم أثناء التشغيل، مما يوفر تجربة مشاهدة سلسة.
• تطبيقات التنقل: يمكن لتطبيق التنقل استخدام واجهة برمجة التطبيقات لإبقاء الشاشة قيد التشغيل أثناء قيادة المستخدم، مما يضمن أن تكون التوجيهات مرئية دائمًا.
• تطبيقات العروض التقديمية: يمكن لتطبيق العروض التقديمية استخدام واجهة برمجة التطبيقات لمنع الشاشة من التعتيم أثناء العرض التقديمي، مما يضمن أن يتمكن الجمهور دائمًا من رؤية الشرائح.
• تطبيقات اللياقة البدنية: يمكن لتطبيق اللياقة البدنية الذي يتتبع جلسة تمرين إبقاء الشاشة قيد التشغيل حتى يتمكن المستخدمون من عرض المقاييس بسرعة دون الحاجة إلى إلغاء قفل أجهزتهم.
• تطبيقات الوصفات: يمكن لتطبيق الوصفات استخدام واجهة برمجة التطبيقات لإبقاء الشاشة قيد التشغيل أثناء اتباع المستخدم لوصفة، مما يمنع الشاشة من التعتيم أثناء قيام المستخدم بالطهي.
• تطبيقات الأكشاك: تستفيد تطبيقات الأكشاك من هذه الميزة. على سبيل المثال، يمكن لأكشاك الخدمة الذاتية في المطارات أو المطاعم استخدام واجهة برمجة تطبيقات قفل تنبيه الشاشة لضمان بقاء الشاشة نشطة ومتجاوبة مع تفاعلات المستخدم.
• تطبيقات التطبيب عن بعد: أثناء مواعيد الطبيب الافتراضية، وخاصة تلك التي تتطلب المراقبة، يمكن استخدام واجهة برمجة تطبيقات قفل تنبيه الشاشة لضمان بقاء الشاشة قيد التشغيل طوال الاستشارة.

مثال على التعليمات البرمجية: مشغل وسائط مع قفل تنبيه الشاشة

يوضح هذا المثال كيفية تنفيذ واجهة برمجة تطبيقات قفل تنبيه الشاشة في تطبيق مشغل وسائط بسيط.

            
<!DOCTYPE html>
<html>
<head>
  <title>Media Player with Screen Wake Lock</title>
</head>
<body>
  <video id="myVideo" width="640" height="360" controls>
    <source src="your-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

  <button id="wakeLockBtn">Enable Screen Wake Lock</button>

  <script>
    const video = document.getElementById('myVideo');
    const wakeLockBtn = document.getElementById('wakeLockBtn');
    let wakeLock = null;

    const requestWakeLock = async () => {
      try {
        wakeLock = await navigator.wakeLock.request('screen');
        console.log('Screen wake lock active!');
        wakeLockBtn.textContent = 'Disable Screen Wake Lock';

        wakeLock.addEventListener('release', () => {
          console.log('Screen Wake Lock was released');
          wakeLockBtn.textContent = 'Enable Screen Wake Lock';
        });

      } catch (err) {
        console.error(`${err.name}, ${err.message}`);
      }
    };

    const releaseWakeLock = async () => {
      if (wakeLock) {
        await wakeLock.release();
        wakeLock = null;
        console.log('Screen wake lock released!');
        wakeLockBtn.textContent = 'Enable Screen Wake Lock';
      }
    };

    wakeLockBtn.addEventListener('click', () => {
      if (wakeLock) {
        releaseWakeLock();
      } else {
        requestWakeLock();
      }
    });

    // Optional: Automatically request wake lock when video starts playing
    video.addEventListener('play', () => {
        if(!wakeLock){
            requestWakeLock();
        }
    });

  </script>
</body>
</html>

            

              
                Copy
              
            
          

ينشئ هذا الكود مشغل وسائط بسيطًا مع زر لتمكين أو تعطيل قفل تنبيه الشاشة. عند النقر فوق الزر، يقوم الكود إما بطلب قفل تنبيه جديد أو بتحرير القفل الحالي. يتم تحديث نص الزر ليعكس الحالة الحالية لقفل التنبيه. يتضمن هذا المثال أيضًا مستمع أحداث اختياري يطلب قفل التنبيه تلقائيًا عند بدء تشغيل الفيديو. ملاحظة: استبدل your-video.mp4 بالمسار الفعلي لملف الفيديو الخاص بك.

اعتبارات الأمان

تم تصميم واجهة برمجة تطبيقات قفل تنبيه الشاشة مع وضع الأمان في الاعتبار. تنفذ المتصفحات العديد من التدابير الأمنية لمنع إساءة استخدام واجهة برمجة التطبيقات. على سبيل المثال، قد تحد المتصفحات من المدة التي يمكن خلالها الاحتفاظ بقفل التنبيه أو تتطلب تفاعل المستخدم قبل منح قفل التنبيه. اتبع دائمًا أفضل الممارسات الموضحة سابقًا في هذه المقالة للتأكد من أنك تستخدم واجهة برمجة التطبيقات بمسؤولية وأخلاقية.

بدائل لواجهة برمجة تطبيقات قفل تنبيه الشاشة

قبل واجهة برمجة تطبيقات قفل تنبيه الشاشة، غالبًا ما استخدم المطورون "اختراقات" لمنع إسبات الشاشة. هذه الطرق غير موثوقة بشكل عام ولا يوصى بها.

• عنصر فيديو No-Op: إدراج عنصر فيديو صغير صامت في الصفحة وتشغيله باستمرار. هذا يخدع النظام للاعتقاد بأن الوسائط قيد التشغيل، وبالتالي يمنع النوم. هذا مكثف للغاية للموارد.
• طلبات AJAX الوهمية: إرسال طلبات AJAX بشكل دوري إلى الخادم لإبقاء الجهاز "نشطًا". هذا بديل سيئ، لأنه مكثف للشبكة وغير موثوق به.

لا يوصى بهذه الطرق، لأنها غير موثوقة ويمكن أن تؤثر سلبًا على الأداء وعمر البطارية. واجهة برمجة تطبيقات قفل تنبيه الشاشة هي الحل الموصى به لمنع إسبات الشاشة في تطبيقات الويب.

الخلاصة

واجهة برمجة تطبيقات قفل تنبيه الشاشة هي أداة قيمة لمطوري الويب الذين يرغبون في إنشاء تجارب مستخدم سلسة وجذابة. من خلال منع الأجهزة من تعتيم الشاشة أو قفلها، يمكنك التأكد من أن تطبيقاتك تظل مرئية ومتجاوبة، حتى خلال فترات طويلة من عدم النشاط. تذكر استخدام واجهة برمجة التطبيقات بمسؤولية واتباع أفضل الممارسات الموضحة في هذه المقالة لتجنب استنزاف بطارية الجهاز والتأثير سلبًا على تجربة المستخدم. مع اكتساب واجهة برمجة التطبيقات اعتمادًا أوسع، ستصبح بلا شك جزءًا أساسيًا من مجموعة أدوات تطوير الويب. احتضن قوة واجهة برمجة تطبيقات قفل تنبيه الشاشة لرفع مستوى تطبيقات الويب الخاصة بك وتوفير تجربة أكثر متعة لمستخدميك في جميع أنحاء العالم.